<%@ include file="../../base/include.jsp"%>
<script type="text/javascript"
	src="<c:url value='/web-resources/js/calendar/func.js'/>"></script>

<link rel='stylesheet' type='text/css'
	href="<c:url value='/web-resources/js/plugin/fullcalendar/fullcalendar.css'/>" />
<script type='text/javascript'
	src="<c:url value='/web-resources/js/plugin/fullcalendar/fullcalendar.min.js'/>"></script>
<security:authorize var="isAdmin" access="hasAnyRole('ADMINISTRATOR')" />

<h2>Calendar</h2>

<div class="well actionbar">
	<select id="eventFilter" onchange="getEvents();">
		<option value="2">Public &amp; User</option>
		<option value="1">Public</option>
		<option value="0">User</option>
	</select>
	<div class="row-fluid">
		<div id='calendar'></div>
	</div>
</div>

<div id="createEventModal" class="modal fade in" style="display: none;">
	<div class="modal-header" style="border-bottom: 0px;">
		<a href="#" class="close" data-dismiss="modal">&times;</a>
		<h3>Creating new event</h3>
	</div>
	<div class="modal-body">
		<div class="input-prepend">
			<span class="add-on">Title:</span> <input id="eventTitle"
				name="eventTitle" class="span11" maxlength="255" /> <input
				id="eventId" name="eventId" type="hidden" /> <input
				id="eventContentId" name="eventContentId" type="hidden" />
		</div>
		<form class="form-inline">
			<div class="control-group">
				<label class="control-label" for="beginDate">Start date:</label> <span
					class="controls"> <input id="beginDate" readonly="readonly"
					placeholder="Start" class="span4" /> <span id="beginTime"
					style="margin-right: 3px;"> <input type="text"
						id="spinnerBeginHour" maxlength="2" style="width: 35px" /> <input
						type="text" id="spinnerBeginMin" maxlength="2" style="width: 35px" />
				</span>
				</span>
			</div>
			<div class="control-group">
				<label class="control-label" for="endDate">Stop date:</label> <span
					class="controls"> <input id="endDate" readonly="readonly"
					placeholder="Stop" class="span4" /> <span id="endTime"
					style="margin-right: 7px;"> <input type="text"
						id="spinnerEndHour" maxlength="2" style="width: 35px" /> <input
						type="text" id="spinnerEndMin" maxlength="2" style="width: 35px" />
				</span>
				</span>
			</div>
			<div class="control-group">
				<label class="control-label" for="eventURL">URL:</label> <span
					class="controls"> <span class="input-append"> <input
						class="span12" id="eventURL" type="text"> <a id="btnUrl"
						class="btn" data-dismiss="modal" href="#">Go to!</a>
				</span>
				</span>
			</div>
			<c:if test="${isAdmin}">
				<div class="control-group">
					<label class="control-label" for="eventURL"></label>
					<div class="controls">
						<label class="checkbox"> <input id="isSystem"
							name="isSystem" type="checkbox" value="Public event" /> Public
							event
						</label>
					</div>
				</div>
			</c:if>
			<div id="eventError"></div>
		</form>
	</div>
	<div class="modal-footer">
		<div class="alert-actions">
			<a id="btnCreate" class="btn btn-primary" href="#"
				onclick="createUpdateCalendarEvent();">Create</a> <a id="btnDelete"
				class="btn" href="#" onclick="deleteCalendarEvent();">Delete</a> <a
				id="btnCancel" class="btn" data-dismiss="modal" href="#">Cancel</a>
		</div>
	</div>
</div>

<script type='text/javascript'>
	$(document).ready(function() {
		getEvents();

		$('#beginDate, #endDate').datepicker({
			beforeShow : restrictDateRange,
		});
		$('#spinnerBeginHour, #spinnerEndHour').spinner({
			min : 0,
			max : 23
		});
		$('#spinnerBeginMin, #spinnerEndMin').spinner({
			min : 0,
			max : 59
		});
		$('#beginTime input, #endTime input').val('00');
	});

	$('#beginTime input, #endTime input').change(function() {
		var old = $(this).val();
		if (old.match(/^\d{1}$/)) {
			$(this).val('0' + old);
		}
	});
</script>
